<template>
  <!--左测导航开始 -->
  <nav class="navbar-default navbar-side ">
    <div class="slimScrollDiv" style="width: auto;height: 100%; position: relative;">
        <div class="sidebar-collapse" style="width: auto;height: 100%;">
            <ul id="side-menu" class="nav">
              <li class="nav-header" >
                  <div class="dropdown profile-element" style="text-align: center;font-size: 1.125rem;font-weight: 600;color: white;">
                    CRM综合管理平台
                  </div>
                  <div class="logo-element">桐老厮 </div>
              </li>
             <!--  <menu-item  :item = "item" v-for = "(item,index) in menuList" :key = "index"></menu-item> -->
             <el-menu>
              <elMenu-Item :item = "item" v-for = "item in menuList"  :key = "item.id"></elMenu-Item>
             </el-menu>
            </ul>

        </div>
    </div>


  </nav>
</template>

<script>
  import menuItem from './elmenuItem.vue'
 export default{
   data() {
     return {
        menuList: {},
        user: {}
     }
   },
   components : {
     menuItem
   },
   created() {
     //获取菜单列表
     this.getMenuList();
   },
   methods :{
     getMenuList: function () {
       this.ais.sendGet('/sys/menu/userMenu').then(msg =>{
         console.log(msg.data)
         var data = msg.data;
        this.menuList = data.result
       }).catch(err => console.log(err))

     },
     getUserInfo: function () {

     },
     //菜单点击事件
     menuItemclick: function(){
       console.log('father====================')
     }

   }
 }
</script>

<style>
  .nav > li{
    position: relative;
    display: block;
  }
  .nav > li > a {
      color: #a7b1c2;
      font-weight: 600;
      padding: 14px 20px 14px 25px;
  }
  a {
    cursor: pointer;
  }

  .collapse {
      display: none;
  }
  .nav li>a {
      display: block;
      /*white-space: nowrap;*/
  }
  .nav.navbar-right > li > a {
      color: #999c9e;
  }
  .nav > li.active > a {
      color: #ffffff;
  }
.nav.nav-second-level.collapse[style] {
    height: auto !important;
}
  .fa {
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
          font-size: 14px;
      font-size: inherit;
      text-rendering: auto;
  }

  .arrow {
      float: right;
      margin-top: 2px;
  }

  .logo-element {
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      color: white;
      display: none;
      padding: 18px 0;
  }
  .nav-header{
    padding: 20px 25px 13px 25px;
    background :url("../img/header-profile.png") no-repeat;
  }

  .pace-done .nav-header {
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
  }
  .navbar-default .nav > li > a:hover,
  .navbar-default .nav > li > a:focus {
      background-color: #293846;
      color: white;
  }

  .navbar-default {
      background-color: transparent;
      border-color: #2f4050;
      position: relative;
  }
.navbar-side{
      position: fixed;
      background: #2f4050;
      width: 200px;
      height: 100%;
}
  .navbar-top-links li {
      display: inline-block;
  }

  .navbar-top-links li:last-child {
      margin-right: 30px;
  }
  .slimScrollDiv > *{
    overflow: hidden;
  }


</style>
